<template>
  <i class="zicon" :class="classes" :disabled="disabled" :style="styles" @click="onClick"></i>
</template>

<script>
export default {
  name: "ZIcon",
  props: {
    custom: {
      type: String,
      default: "",
    },
    size: {
      type: [String, Number],
      default: "14",
    },
    hover: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  computed: {
    classes() {
      return {
        [this.custom]: this.custom,
        [this.icon]: this.icon,
        [`z-icon-${this.size}`]: inArray([12, 14, 16, 18, 24], Number(this.size)),
        hover: this.hover,
        active: this.active,
      };
    },
    styles() {
      return this.color ? { color: this.color } : null;
    },
  },
  methods: {
    onClick(event) {
      if (!this.disabled) {
        this.$emit("click", event);
      }
    },
  },
};
function inArray(arr, i) {
  return arr.toString().indexOf(i) > -1 ? true : false;
}
</script>
